<template>
  <div class="collect-work-container">

    <hurdle :showLine="0"></hurdle>

    <banner bannerText="收藏企业" bannerEn="Collection enterprise"></banner>

    <div class="collect-work-box" v-if="showData == 1">

      <div class="collect-work-item" v-for="(collect,index) in collectList" :key="index"
           @click="openRecruit(collect.id)">

        <div class="collect-work-con">
          <img :src="collect.mechanismUrl?collect.mechanismUrl:require('../../../images/pic _bg.png')"
               class="collect-pic1"/>
          <div class="collect-company-box">

            <div class="company-con1">
              <span class="company-name">{{collect.mechanismName}}</span>
              <span class="company-lend" v-show="collect.lendType == 1">可借支</span>
            </div>

            <div class="company-con2">
              <span>{{collect.workName}}</span>
            </div>
            <div class="company-con3">
              招聘要求：<span v-if="collect.age" class="work-age">{{collect.age}}</span>
              <span>招{{collect.maxNumber}}人</span>
              <span v-if="collect.recruitStatus != 1">/已报名{{collect.applyNumber}}人</span>
            </div>
            <div class="company-con4">
              <span v-if="collect.postType == 1">{{collect.workHourMoney}}元/时</span>
              <span v-if="collect.postType == 0">{{collect.wageRange}}元/月</span>
            </div>
          </div>

          <div class="collect-return-fee-box"
               v-if="collect.postType == 0 && collect.reStatus == 1 && collect.reMoney > 0 && collect.reTime > 0">
            <img src="../../../images/home_fee.png" class="collect-pic2"/>
            <span class="collect-work-money">{{collect.reMoney}}元</span>
          </div>
          <div class="collect-return-fee-box"
               v-if="collect.postType == 1 && collect.reStatus == 1 && collect.addWorkMoney > 0 && collect.reTime > 0">
            <img src="../../../images/home_fee.png" class="collect-pic2"/>
            <span class="collect-work-money">{{Math.floor(collect.addWorkMoney * 10) / 10}}元/时</span>
          </div>

          <div class="collect-info-box">
            <span class="collect-line"></span>
            <div class="collect-info-con">
              <button class="await-apply" type="button" v-if="collect.status == 1">待招聘</button>
              <button class="promptly-apply" type="button" v-else-if="collect.isApply == 1 || collect.isApply == null"
                      @click="openApplyModal(collect.reTime,collect.reMoney,collect.interviewTime,collect.mechanismId,collect.id,collect.recruitAddress,collect.mechanismName)">
                立即报名
              </button>
              <button class="cancel-apply" type="button" v-else-if="collect.isApply == 0"
                      @click="cancelApply(collect.id)">取消报名
              </button>

              <span class="cancel-collect" @click="collectWork(collect.id)">取消收藏</span>
            </div>

          </div>
        </div>
      </div>

      <el-pagination background layout="prev, pager, next" :total="totalSize" :page-size="8" :hide-on-single-page="true"
                     prev-text='上一页' next-text='下一页' class="collect-page-box" @current-change="curPage"
                     v-if="showData == 1 && collectList.length >0">
      </el-pagination>
    </div>


    <empty tipText="暂无收藏企业~" v-if="showData == 2"></empty>


    <apply-work :showApplyModal="showApplyModal" @closeApplyModal="closeApplyModal"
                @commitApply="commitApply"></apply-work>

    <service></service>

    <store-footer></store-footer>

    <apply-success :showApplySuccess="showApplySuccess" @closeApplySuccess="closeApplySuccess"
                   @lookApplySuccess="lookApplySuccess"></apply-success>

    <back-top></back-top>
  </div>
</template>

<script>
  import hurdle from "../../../components/hurdle";
  import banner from "../../../components/banner";
  import service from "../../../components/service";
  import storeFooter from "../../../components/storeFooter";
  import applyWork from "../../../components/applyWork";
  import applySuccess from "../../../components/applySuccess";
  import Empty from "../../../components/empty";
  import {getSessionStore} from "../../../config/util";
  import {Loading} from 'element-ui';
  import {baseUrl} from "../../../config/env";
  import backTop from "../../../components/backTop";

  export default {
    inject: ['reload'],
    data() {
      return {
        userWand: "",
        page: 1,
        size: 8,
        showData: 0,
        userToken: "",
        totalSize: 0,
        collectList: [],
        showApplyModal: false,
        identity: "",
        origin: "",
        reTime: "",
        reMoney: "",
        interviewTime: "",
        mechanismId: "",
        recruitAddress: "",
        mechanismName: "",
        realName: "",
        showApplySuccess: false
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      if (getSessionStore("userWand")) {
        this.userWand = base64.decode(getSessionStore("userWand"));
        this.userToken = getSessionStore("userToken");
      }
      this.queryCollectList();
    },
    methods: {
      queryCollectList() {
        this.axios.get(baseUrl + "/workapi/get_work_collection_api?userToken=" + this.userToken + "&page=" + this.page + "&size=" + this.size).then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            this.totalSize = retObj.data.totalSize;//总页数

            if (retObj.data.list != null && retObj.data.list.length > 0) {//面试预约列表
              this.showData = 1;
              this.collectList = retObj.data.list;
            } else {
              this.showData = 2;
            }
          } else {
            this.$message({message: retObj.msg, center: true, type: 'error', duration: 1000});
          }
        });
      },
      curPage(page) {
        this.page = page;
        this.queryCollectList();
      },
      cancelApply(workId, e) {//取消报名
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.axios.post(baseUrl + "/work/cancleApply?userToken=" + this.userToken + "&workId=" + workId).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "取消报名失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.curPage(this.page);
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      collectWork(workId, e) {//收藏
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.axios.get(baseUrl + "/social/set_collection?userToken=" + this.userToken + "&type=1" + "&status=1" + "&id=" + workId).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0) {
            if (resultObj.data == 1) {
              this.reload();
              this.$message({message: "取消收藏成功", center: true, type: 'success', duration: 1000});
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      closeApplyModal() {
        this.showApplyModal = false;
      },
      openApplyModal(reTime, reMoney, interviewTime, mechanismId, workId, recruitAddress, mechanismName, e) {
        this.reTime = reTime;
        this.reMoney = reMoney;
        this.interviewTime = interviewTime;
        this.workId = workId;
        this.mechanismId = mechanismId;
        this.recruitAddress = recruitAddress;
        this.mechanismName = mechanismName;
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }
        let name = this.queryIsRealName();
        if (name != "" && name != undefined && name != null) {//实名
          this.commitApply(name);
        } else {
          this.showApplyModal = true;
        }
      },
      queryIsRealName() {
        this.axios.get(baseUrl + "/workapi/get_user_real_api?userToken=" + this.userToken).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            this.realName = resultObj.data;
          }
        });
      },
      commitApply(name) {//报名
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.showApplyModal = false;
        let data = {
          "reTime": this.reTime,
          "reMoney": this.reMoney,
          "identity": this.identity,
          "interviewTime": this.interviewTime,
          "mechanismId": this.mechanismId,
          "userName": name,
          "workId": this.workId,
          "recruitAddress": this.recruitAddress,
          "mechanismName": this.mechanismName,
          "origin": this.origin,
        };

        this.axios.post(baseUrl + "/work/entryApply?type=1" + "&userToken=" + this.userToken, data).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "报名失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.showApplySuccess = true;
              this.curPage(this.page);
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      closeApplySuccess() {
        this.showApplySuccess = false;
      },
      lookApplySuccess() {
        this.showApplySuccess = false;
        window.open("/interview");
      },
      openRecruit(workId) {
        window.open("/workDetail?workId=" + workId);
      }
    },
    components: {
      Empty,
      hurdle,
      banner,
      service,
      applySuccess,
      applyWork,
      storeFooter,
      backTop
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assets/mixin";

  .collect-work-container {
    position: relative;
    .wh(100%, auto);
    .collect-work-box {
      .wh(100%, auto);
      padding-top: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .collect-work-item {
        display: flex;
        flex-direction: column;
        .wh(1200px, 148px);
        margin-bottom: 16px;
        border: 1px solid #EBEBEB;
        .collect-work-con {
          display: flex;
          align-items: center;
          .wh(100%, 147px);
          background: #FFF;
          position: relative;
          .collect-pic1 {
            margin-left: 18px;
            margin-right: 25px;
            .wh(152px, 112px);
            background: #F5F5F5;
          }
          .collect-company-box {
            display: flex;
            flex-direction: column;
            .company-con1 {
              display: flex;
              align-items: center;
              padding-bottom: 10px;
              .company-name {
                .size-color(18px, #333333);
              }
              .company-lend {
                .wh(60px, 20px);
                background: #3CAFFF;
                border-radius: 2px;
                .size-color(14px, #FFF);
                text-align: center;
                line-height: 20px;
                margin-left: 22px;
              }
            }
            .company-con2 {
              .size-color-weight(16px, #3CAFFF, 500);
            }
            .company-con3 {
              padding-top: 10px;
              padding-bottom: 15px;
              span {
                .size-color(14px, #4D4D4D);
              }
              .work-age {
                margin-right: 15px;
              }
            }
            .company-con4 {
              .size-color-weight(16px, #FF7C3C, 500);
            }
          }
          .collect-return-fee-box {
            position: absolute;
            right: 186px;
            top: 24px;
            .wh(92px, 92px);
            .collect-pic2 {
              .wh(100%, 100%)
            }
            .collect-work-money {
              position: absolute;
              bottom: 13px;
              width: 75px;
              left: 0;
              text-align: center;
              .size-color-weight(15px, #FFF, 500);
            }
          }
          .collect-info-box {
            position: absolute;
            top: 0;
            right: 0;
            .wh(160px, 100%);
            display: flex;
            align-items: center;
            .collect-line {
              .wh(1px, 100px);
              background: #EBEBEB;
            }
            .collect-info-con {
              margin-left: 22px;
              display: flex;
              flex-direction: column;
              .promptly-apply {
                .wh(120px, 42px);
                .size-color(16px, #FFF);
                background: #3CAFFF;
                border-radius: 4px;
                &:hover {
                  background: #39A2ED;
                  cursor: pointer;
                }
              }
              .cancel-apply {
                .wh(120px, 42px);
                .size-color(16px, #FFF);
                background: rgba(255, 166, 60, 1);
                border-radius: 4px;
                &:hover {
                  background: #F5A13B;
                  cursor: pointer;
                }
              }
              .await-apply {
                .wh(120px, 42px);
                .size-color(16px, #FFF);
                background: #CCCCCC;
                border-radius: 4px;
                cursor: pointer;
              }
              .cancel-collect {
                text-align: center;
                margin-top: 28px;
                .size-color(16px, #3CAFFF);
                cursor: pointer;
              }
            }
          }
        }
      }
      .collect-page-box {
        margin: 44px auto 60px;
      }
      .collect-page-box /deep/ .btn-prev span {
        padding-left: 4px;
        padding-right: 4px;
      }
      .collect-page-box /deep/ .btn-next span {
        padding-left: 4px;
        padding-right: 4px;
      }
    }
  }
</style>
